<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<title>jquery-question</title>
	<style type="text/css">
		#questionContent{ width: 100%; height: 100%;}
		#questionContent div[data-question='true'] { background-color: gray; width: 100%; height: 50%; margin-top: 1%;}
		#questionContent div[data-button='true'] { background-color: white; height: 20%; margin-top: 1%;}
		.hidden{ display: none;}
	</style>
</head>
<body>
	<div id="questionContent">
		<div data-question="true"></div>
		<div data-question="true"></div>
		<div data-question="true"></div>
		<div data-button="true"></div>
	</div>

	<script type="text/javascript" src="./assets/js/jquery.min.js"></script>
	<script type="text/javascript" src="./assets/js/jquery-question.js"></script>
	<script type="text/javascript">
	$(function(){
		var data = [ //默认题目
			{
				titleContent: {
					id:"1",
					title: "title1"
				},
				answerNum: 4,
				answerContent: {
					answer: ["answer1", "answer2", "answer3", "answer4"],
					type: "radio",
					inputName: "question_1",
					inputClass: "radio",
					inputValue: ["1-answer1", "1-answer2", "1-answer3", "1-answer4"]					
				}
			},
			{
				titleContent: {
					id:"2",
					title: "title2"
				},
				answerNum: 4,
				answerContent: {
					answer: ["answer1", "answer2", "answer3", "answer4"],
					type: "checkbox",
					inputName: "question_2",
					inputClass: "checkbox",
					inputValue: ["2-answer1", "2-answer2", "2-answer3", "2-answer4"]					
				}
			},
			{
				titleContent: {
					id:"3",
					title: "title3"
				},
				answerNum: 4,
				answerContent: {
					answer: ["answer1", "answer2", "answer3", "answer4"],
					type: "radio",
					inputName: "question_3",
					inputClass: "radio",
					inputValue: ["3-answer1", "3-answer2", "3-answer3", "3-answer4"]					
				}
			},
		];

		$("#questionContent").jqueryQuestion({
			templateTitle: "<label id='{id}'>{title}</label>", //标题模板{title}
			templateAnswer: "<div><input class='{inputClass}' type='{type}' name='{inputName}' value='{inputValue}' />{answer}</div>", //选项模板{type}, {inputName}, {inputValue}, {answer}
			buttonSet: true, //是否设置按钮(true, false)
			templateButton: "<button data-button-type='prev'>上一步</button>"+
					     "<button data-button-type='next'>下一步</button>"+
					     "<button data-button-type='submit'>提交</button>", //按钮模板（buttonSet设置为true时候生效）
			index: 0, //从第几题开始，默认0
			hiddenClass: "hidden", //隐藏的class名
			data: data,
			onchange: function(event, index){ //切换时题目触发
				//console.log(index);
				event();
			},
			submit: function(){ //提交方法
				alert("提交");
			}
		});
		
	})
	</script>
</body>
</html>